<template>
  <div class="left">
    <Transition name="bounce">
      <div class="left-menu-frame" v-show="showMenu">
        <div class="menu-container">
          <div class="head-title">
            <img src="../assets/flow.png">
            <div class="title">流程图</div>
          </div>
          <div class="container scroll">
            <MenuItem v-for="item in MenuList" :key="item.key" :data="item" @select="selectMenu" @click-opt="clickOpt" :current-menu="currentMenu"/>
          </div>
        </div>
        <div class="menu-bottom-btn" @click="closeMenu">
          <img src="../assets/left-slide.png" />
          <span>关闭菜单</span>
          <img src="../assets/right-slide.png" />
        </div>
      </div>
    </Transition>
    <div class="open-menu-flag" v-show="!showMenu" @click="openMenu" title="打开菜单">
      <img src="../assets/openMenu.png">
    </div>
  </div>
</template>

<script setup lang="ts">
import {useMenu} from "../util/hook.ts";
import MenuItem from "../component/MenuItem.vue";
import {ref} from "vue";
import {MenuList} from "../config";
import {MenuNewType} from "../util/types.d.ts";

const {closeMenu, openMenu, showMenu} = useMenu();
let currentMenu = ref('');
function selectMenu(menu: string) {
  currentMenu.value = menu;
}

function clickOpt(data: MenuNewType) {
  console.log(data);
}

</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in 0.2s reverse;
}

@keyframes bounce-in {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
</style>
